<template>
  <div v-loading="loading" element-loading-text="数据加载中...">
    <div ref="chartRef" style="height: 300px"></div>
  </div>
</template>
<script setup>
import { onMounted, unref, watch } from "vue";
import * as echarts from "echarts";
import { deepClone } from "@/utils/index.js";
import { debounce } from "@/utils";
import "echarts/theme/macarons"; // echarts theme
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  loading: true,
});

const state = reactive({
  dataOrigin: [],
  chartRef: null,
  options: {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["接单量", "发货量", "库存量"],
      top: "10",
      right: "0",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {
    //       show: true
    //     },
    //   },
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
      },
    },
    series: [
      {
        name: "接单量",
        type: "line",
        smooth: false,
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "发货量",
        type: "line",
        smooth: false,
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      // {
      //   name: "库存量",
      //   type: "line",
      //   smooth: false,
      //   data: [220, 182, 191, 234, 290, 330, 310].reverse(),
      // },
    ],
  },
});
let { dataOrigin, chartRef, options } = toRefs(state);
// chart = unref(chart); //响应式proxy对象，获取不到深层属性，导致点击legend报错
let chart = null;
watch(
  () => props.data,
  (newVal) => {
    initData(newVal);
    // options.value.series[0].data = newVal;
    chart.setOption(options.value);
  }
);
onMounted(() => {
  if (!props.loading) initData(props.data);
  // chart = echarts.init(chartRef.value);
  chart = echarts.init(chartRef.value, "macarons");
  chart.setOption(options.value);
});
watch(
  () => props.data,
  (newVal) => {
    dataOrigin.value = deepClone(newVal);
  },
  {}
);
function initData(data) {
  //OrderNewStatistic 接单量
  //OrderDeliveryStatistic 发货量
  //OrderStockStatistic 库存量

  //获取最长的数组作为横轴范围
  let a = [
    data["OrderNewStatistic"],
    data["OrderDeliveryStatistic"],
    data["OrderStockStatistic"],
  ];
  let max = a[0].length;
  let b = 0;
  for (let i = 1; i < a.length; i++) {
    if (!a[i]) continue;
    if (max < a[i].length) {
      max = a[i].length;
      b = i;
    }
  }
  options.value.xAxis.data = a[b].map((e) => e.StatisticName);

  //给剩余的数组补充长度，Count为0
  a.forEach((arr, i) => {
    if (arr)
      if (i !== b) {
        a[b].forEach((item) => {
          if (!arr.find((e) => e.StatisticName == item.StatisticName))
            arr.push({
              Count: "0(0.00)",
              Id: 11 + arr.length,
              StatisticName: item.StatisticName,
            });
        });
        //完了再按月份升序，和横轴对上
        a[i] = arr.sort((pre, next) =>
          pre.StatisticName.localeCompare(next.StatisticName)
        );
      }
  });

  options.value.series[0].data = a[0].map((e) =>
    parseInt(e.Count.split("(")[0])
  );
  options.value.series[1].data = a[1].map((e) =>
    parseInt(e.Count.split("(")[0])
  );
  // options.value.series[2].data = a[2].map((e) =>
  //   parseInt(e.Count.split("(")[0])
  // );

  window.addEventListener("resize", () => {
    chart.resize();
  });
  sideBarAutoResize();
}
function sideBarAutoResize() {
  let sideBarElm = document.getElementsByClassName("sidebar-container")[0];
  sideBarElm &&
    sideBarElm.addEventListener("transitionend", (e) => {
      if (e.propertyName === "width") {
        chart.resize();
      }
    });
}
</script>
<style>
.title {
  font-size: 16px;
  font-weight: bold;
}
</style>
